<template>
	<view class="g-shop-wraper">
		<image class="m-logo" :src="product.picture" />
		<view class="g-shop">
			<view class="m-title">{{product.shop}}</view>
			<view class="m-price">价格:<text>￥{{product.price}}</text> </view>
		</view>
	</view>
</template>

<script setup>
	//组合式 传参
	const propObj = defineProps({
		product:Object
	})
	
	// export default {
	// 	name: "ProductList",
	// 	props:{
	// 		product:Object
	// 	}
	// }
</script>

<style lang="scss" scope>
	.g-shop-wraper {
		display: flex;
		margin: 20px 10px;
		background-color: #fff;
		.m-logo {
			width: 130px;
			height: 130px;
		}

		.g-shop {
			flex: 1;
			.m-title {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				word-break: break-all;
			}
			.m-price{
				text{
					 color: red;
					 font-size: 14px;
					 font-weight: bold;
				}
			}
		}
	}
</style>
